<template>
	<view class="plr20">
		<view class="pos flex_start plr20 ptb10"
			style="background: #F7F7F7;border-radius: 32upx;border: 1px solid #E6E0DA;height:75rpx;">
			<uni-icons class="mr20" type="search" size="16" color="#999"></uni-icons>
			<view class="uni-form-item uni-column">
				<input class="uni-input f28" v-model="val" confirm-type="search" placeholder="输入搜索内容"
					@focus="search_site" @input="search_site" style="width:500rpx;" />
			</view>
			<!-- <button @click="search_site">啊啊啊</button> -->
			<!-- treelist -->
			<view v-if="treelist.length!=0" class="abs p20 divbox"
				style="left: 0;top:85rpx;z-index: 6; width: 100%;max-height: 400rpx;overflow-y: scroll;">
				<view v-for="(item,index) in treelist" :key="index" class="bbe9s ptb20" @click="chosewho(item)">
					<view class="f32">{{item.Title}}</view>
				</view>
			</view>
		</view>
		<!-- history -->
		<view v-if="his.length!=0&&treelist.length==0" class="mt30 f30 pos" style="color:#1A1817;z-index: 1;">推荐搜索
		</view>
		<view v-if="his.length!=0&&treelist.length==0" class="p20 flex_warp flex_items pos" style="z-index: 1;">
			<view v-for="(item,index) in his.slice(0,10)" :key="index" @click="gohis(item.SearchKey)"
				class="mr20 mt20 f-center plr20"
				style="min-width:110rpx;height: 56rpx;background: #F2F2F2;border-radius: 28rpx;">
				<text class="f30" style="color: #1A1817;">{{item.SearchKey}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Getsearch,
		Gethistorys
	} from '@/api/api.js';
	export default {
		data() {
			return {
				imgUrl: '',
				istrue: false,
				val: "",
				treelist: [],
				his: []
			}
		},
		onLoad() {
			this.gethistory()
		},
		methods: {
			gethistory() {
				Gethistorys({
					Index: 1,
					Size: 10
				}).then(res => {
					console.log(res)
					res.Data.forEach(function(item, index) {
						if (item.SearchKey == '') {
							res.Data.splice(index, 1)
						}
					})
					this.his = res.Data
				})
			},
			//模糊查询
			search_site() {
				if (this.val == '') {
					this.treelist = []
					return false
				}
				clearTimeout(this.timmer);
				this.timmer = setTimeout(() => {
					Getsearch({
						Index: 1,
						Size: 100,
						Title: this.val,
						ArticleCategory: 0
					}).then(res => {
						console.log(res)
						if (res.Data == null) {
							this.treelist = []
						} else {
							this.treelist = res.Data
						}

					})

				}, 500)
			},
			chosewho(item) {
				this.val = item.Title
				this.treelist = []
				uni.navigateTo({
					url: "./tourdetail?Id=" + item.Id
				})
			},
			gohis(words) {
				this.val = words
				this.search_site()
				// Getsearch({
				// 	Index: 1,
				// 	Size: 100,
				// 	Title: this.val
				// }).then(res => {
				// 	if (res.Data == null) {
				// 		this.treelist = []
				// 	} else {
				// 		this.treelist = res.Data
				// 	}
				// })
			}
		}
	}
</script>

<style>
	.content1 {
		height: 40rpx;
	}

	page {
		background-color: #ffffff;
	}

	.search-text {
		font-size: 14px;
		background-color: #ffffff;
		height: 60rpx;
		width: 480rpx;
	}

	.search-block {
		display: flex;
		flex-direction: row;
		/* margin-left: 30rpx; */
		/* padding-left: 60rpx; */
		position: relative;
		top: -32rpx;
		align-items: center;
		justify-content: center;
	}

	.shadow {
		margin-right: 60rpx;
		border-radius: 18px;
		-moz-box-shadow: 0 0 10px #e6e6e6;
		-webkit-box-shadow: 0 0 10px #e6e6e6;
		box-shadow: 0 0 10px #e6e6e6;
		/* position: absolute;
		top: -90rpx;
		left: 60rpx; */
	}
</style>
